<script setup lang="ts">
import { ref } from "vue";
import { useUserCenterInfo } from "./utils/hook";
defineOptions({
  name: "PersonalInformation"
});

const circleUrl = ref(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);
const { usercenterinfo, accout, nik, cellphone } = useUserCenterInfo();
</script>

<template>
  <div>
    <el-card style="width: 70%">
      <el-form :model="usercenterinfo">
        <el-form-item> <el-avatar :size="50" :src="circleUrl" /></el-form-item>
        <el-form-item label="账号:"> {{ accout }}</el-form-item>
        <el-form-item label="用户名:"> {{ nik }} </el-form-item>
        <el-form-item label="电话:"> {{ cellphone }} </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
